<template>
    <div class="container" v-if="questionList && questionList.length">
        <template v-for="(item, index) of questionList">
            <el-card class="card-item">
                <template #header>
                    <div class="card-item-header">
                        <div class="card-item-header-first">
                            {{ index + 1 }}.{{ item.type }}&nbsp;<span style="color: blue">（&nbsp;{{ item.score }}&nbsp;分&nbsp;）</span>
                        </div>
                        <div v-if="item?.tag">
                            <lemon-tag :value="item.tag" size="small" />
                        </div>
                    </div>
                </template>
                <template v-if="item.type === '单选题'">
                    <p class="card-item-title">{{ item.question }}</p>
                    <el-radio-group v-model="item.answer[0]">
                        <el-radio class="card-item-body" :value="key" size="large" v-for="(value, key) in item.options">{{ key }}.{{ value }}</el-radio>
                    </el-radio-group>
                </template>
                <template v-else-if="item.type === '多选题'">
                    <p class="card-item-title">{{ item.question }}</p>
                    <el-checkbox-group v-model="item.answer">
                        <el-checkbox class="card-item-body" size="large" v-for="(value, key) in item.options" :label="key + '.' + value" :value="key" />
                    </el-checkbox-group>
                </template>
                <template v-else-if="item.type === '判断题'">
                    <p class="card-item-title">{{ item.question }}</p>
                    <el-radio-group v-model="item.answer[0]">
                        <el-radio class="card-item-body" :value="key" size="large" v-for="(value, key) in item.options">{{ value }}</el-radio>
                    </el-radio-group>
                </template>
                <template v-else-if="item.type === '填空题'">
                    <paper-question-fill-blank :question="item.question" :answer="item.answer" :readonly="true" />
                </template>
                <template v-else-if="item.type === '问答题'">
                    <p class="card-item-title">{{ item.question }}</p>
                    <el-input class="card-item-body" v-model="item.answer" :autosize="{ minRows: 3, maxRows: 40 }" type="textarea" />
                </template>
                <template #footer v-if="item.analysis"> <span class="card-footer">解析：</span>{{ item.analysis }} </template>
            </el-card>
        </template>
    </div>
</template>

<script setup lang="ts">
import LemonTag from "@/components/LemonTag.vue";
import PaperQuestionFillBlank from "@/views/system/components/paper/PaperQuestionFillBlank.vue";

//父传子
interface Props {
    questionList?: Array<any> | [] | null;
}
withDefaults(defineProps<Props>(), {
    questionList: null,
});
</script>

<style scoped lang="less">
.container {
    height: calc(100vh - 250px);
    overflow-y: scroll;
    overflow-x: hidden;
    .card-item {
        margin-top: 10px;
        .card-item-header {
            display: flex;
            justify-content: space-between;
            .card-item-header-first {
                font-weight: 700;
            }
        }
        .card-item-title {
            font-weight: 600;
        }
        .card-item-body {
            pointer-events: none;
            width: 100%;
        }
        .card-footer {
            font-weight: 600;
        }
    }
}
</style>
